<template>
  <div class="app-container">
    <el-container class="intelirri">
      <el-main>
        <el-form
          ref="ruleForm"
          class="demo-form-inline"
          :inline="true"
          :model="searchData"
          :rules="rules"
        >
          <el-form-item label="申请单号" prop="match_num">
            <el-input
              v-model="searchData.APPLY_NUM"
              clearable
              placeholder="申请单号"
              @clear="resetFormData"
              @keyup.enter.native="search"
            />
          </el-form-item>
          <el-form-item v-show="false">
            <el-input />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1" title="受血者信息">
            <el-descriptions
              border
              :column="4"
              content-class-name="contentClass"
              label-class-name="labelClass"
            >
              <el-descriptions-item
                v-for="(item, index) in patientAttrs"
                :key="index"
                :label="item.label"
              >
                <b :class="item.class || ''">
                  {{ getAttr(formData, item.name) }}
                </b>
              </el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
          <el-collapse-item name="2" title="实验室检测">
            <el-descriptions
              border
              :column="3"
              content-class-name="contentClass"
              label-class-name="labelClass"
            >
              <el-descriptions-item
                v-for="(item, index) in formData.APPLY_CHECK_ITEMS
                  .APPLY_CHECK_ITEM"
                :key="index"
                :label="item.CHECK_NAME"
              >
                <b>{{ item.CHECK_RESULT || '--' }}</b>
              </el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
          <el-collapse-item name="3" title="医生信息">
            <el-descriptions
              border
              :column="3"
              content-class-name="contentClass"
              label-class-name="labelClass"
            >
              <el-descriptions-item
                v-for="(item, index) in doctors"
                :key="index"
                :label="item.label"
              >
                {{ getAttr(formData, item.name) }}
              </el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
          <el-collapse-item name="4" title="用血信息">
            <el-table
              border
              :data="formData.BLOOD_CAPACITYS.BLOOD_CAPACITY"
              stripe
              style="width: 100%"
            >
              <el-table-column align="center" label="输血目的" prop="date">
                <template #default="scope">
                  {{ getAttr(fastSlowMap, scope.row.FAST_SLOW) }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                label="用血时间"
                prop="TRANS_DATE"
              />
              <el-table-column
                align="center"
                label="血液成分"
                prop="BLOOD_TYPE_NAME"
              />
              <el-table-column
                align="center"
                label="用血量"
                prop="TRANS_CAPACITY"
              />
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-main>
      <el-aside style="padding-left: 18px" width="30%">
        <right :applies="applies" />
      </el-aside>
    </el-container>
  </div>
</template>

<script>
  import { patientAttrs, doctors, fastSlowMap } from '@/utils/constant'
  import { getAttr } from '@/utils'
  import { PLAK0001, PLAK0010 } from '@/api/client'
  import Right from './component/right'
  export default {
    name: 'BloodApplyIndex',
    components: {
      Right,
    },
    data() {
      return {
        activeNames: ['1', '2', '3', '4'],
        patientAttrs,
        doctors,
        fastSlowMap,
        formData: {
          APPLY_CHECK_ITEMS: {
            APPLY_CHECK_ITEM: [],
          },
          BLOOD_CAPACITYS: {
            BLOOD_CAPACITY: [],
          },
        },
        searchData: {
          APPLY_NUM: '',
        },
        rules: {},
        applies: [],
      }
    },
    created() {
      this.PLAK0010()
    },
    methods: {
      search() {
        this.PLAK0001()
      },
      resetFormData() {
        this.formData = {
          APPLY_CHECK_ITEMS: {
            APPLY_CHECK_ITEM: [],
          },
          BLOOD_CAPACITYS: {
            BLOOD_CAPACITY: [],
          },
        }
      },
      getAttr(formData, field) {
        return getAttr(formData, field)
      },
      PLAK0001() {
        PLAK0001(this.searchData).then((res) => {
          this.formData = res.data
        })
      },
      PLAK0010() {
        PLAK0010({ APPLY_NUM: '', TRANSDATE: '' }).then((res) => {
          this.applies = res.data
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>
